<template>
  <div class="box_wrapper">
    <div class="step_box">
      <el-steps
        :active="active"
        process-status="process"
        finish-status="success"
      >
        <el-step title="提审信息填写" />
        <el-step title="提审小程序确认" />
        <el-step title="提审信息确认" />
      </el-steps>
    </div>

    <div>
      <reviewFirst ref="firstRef" :detailData="detailData" v-if="active == 0" />
      <reviewTwo
        ref="twoRef"
        :detailData="detailData"
        v-else-if="active == 1"
      />
      <reviewThree
        ref="threeRef"
        :detailData="detailData"
        v-else-if="active == 2"
      />
    </div>

    <div class="footer_box">
      <el-form-item label="">
        <el-button
          @click="router.back"
          size="large"
          style="margin-right: 12px"
          v-show="active === 0"
        >
          返 回
        </el-button>
        <el-button
          @click="back"
          size="large"
          style="margin-right: 12px"
          v-if="active > 0"
        >
          上 一 步
        </el-button>
        <el-button type="primary" @click="next" size="large" v-if="active < 2">
          下 一 步
        </el-button>
        <el-button
          type="success"
          @click="config"
          size="large"
          v-if="active === 2"
          :disabled="configStatus"
        >
          确认提审
        </el-button>
      </el-form-item>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import reviewFirst from "./components/reviewFirst.vue";
import reviewTwo from "./components/reviewTwo.vue";
import reviewThree from "./components/reviewThree.vue";
import { operasDetail, reviewOperas } from "@/api/operateCenter/episode/index";
import { useRoute } from "vue-router";
import router from "@/router";
import { cloneDeep, debounce } from "lodash-es";

const route = useRoute();

const active = ref<number>(0);
const detailData = ref();
const configStatus = ref<boolean>(false);
const id = ref(Number(route.query?.id));

const firstRef = ref();
const twoRef = ref();
const threeRef = ref();

const next = () => {
  // 第一步
  if (active.value === 0) {
    firstRef.value.ruleFormRef.validate((valid: any) => {
      if (valid) {
        active.value = 1;
        detailData.value = {
          ...detailData.value,
          ...firstRef.value.detailData,
        };
        localStorage.setItem(
          "firstData",
          JSON.stringify(firstRef.value.detailData)
        );
      }
      return;
    });
  } else if (active.value === 1) {
    if (!twoRef.value.selectionData.length) {
      return ElMessage.error("请选择提审小程序");
    } else {
      setStepTow(2);
    }
  }
};

const back = () => {
  if (active.value == 1) {
    setStepTow(0);
  } else {
    active.value -= 1;
  }
};

// 在步骤二，往下一步或者上一步  缓存第二步的数据
const setStepTow = (step: number) => {
  localStorage.setItem("twoData", JSON.stringify(twoRef.value.selectionData));
  active.value = step;
  detailData.value.reviewAppIds = twoRef.value.selectionData;
};

// 提交审核
const config = debounce(() => {
  let paramsData = {
    id: id.value,
    params: {
      producer: detailData.value.producer,
      recordType: detailData.value.recordType,
      recordInfo: detailData.value.recordInfo,
      reviewAppIds: detailData.value.reviewAppIds.map(
        (x: Record<string, any>) => {
          return x.app.id;
        }
      ),
    },
  };
  configStatus.value = true;
  reviewOperas(paramsData)
    .then((res: Record<string, any>) => {
      ElMessage.success("提审成功");
      localStorage.setItem("reviewFail", JSON.stringify(res));
      router.push("/operate/episode-list?reviewFail=1");
      localStorage.removeItem("firstData");
      localStorage.removeItem("twoData");
    })
    .finally(() => {
      configStatus.value = false;
    });
}, 150);

// 剧目详情
const getOperasDetail = (id: number) => {
  operasDetail(id).then((res: any) => {
    detailData.value = cloneDeep(res);
    let step = route.query?.step || "";
    // 如果点击数字进入审核页面则跳转至步骤二
    if (step) {
      active.value = 1;
      // next();
    }
    // console.log("detailData.value------", detailData.value);
  });
};
onMounted(() => {
  if (id.value) {
    getOperasDetail(id.value);
  }
});

onUnmounted(() => {
  localStorage.removeItem("firstData");
  localStorage.removeItem("twoData");
});
</script>

<style scoped lang="scss">
.box_wrapper {
  position: relative;
  min-height: calc(100vh - 70px);
  padding: 30px;
  background-color: #fff;

  .step_box {
    padding: 0 30px;
    margin-bottom: 30px;

    :deep(.is-process) {
      color: #006eff;
      border-color: #006eff;
    }
  }

  .footer_box {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
  }
}
</style>
